
import { Select, Input, Form } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import { EditLangTabs } from './EditLangTabs'
import styles from './index.less';

export interface DataType {
  key: string;
  'zh-cn': string;
  en: number;
  ja: string;
  editable: boolean;
  siteType: number;
  tags: string[];
}

export interface LangType {
  Code: string;
  Id: string;
  IsDefault: boolean;
  IsShow: boolean;
  IsSystem: boolean;
  Name: string;
  Sort: number;
}

export interface EditableCellProps extends React.HTMLAttributes<HTMLElement> {
  editing: boolean;//是否正在编辑中
  dataIndex: string;
  title: string; //语种字符串用于做准确title提示
  inputType: 'number' | 'text';
  record: DataType;
  index: number;
  children: React.ReactNode;
}

export const getSiteValue = (siteType?: number) => {
  if (!siteType) {
    return []
  }
  let siteDefaultValue = [];
  if (siteType) {
    if ((1 & siteType) == 1) {
      siteDefaultValue.push(1);
    }
    if ((2 & siteType) == 2) {
      siteDefaultValue.push(2);
    }
    if ((4 & siteType) == 4) {
      siteDefaultValue.push(4);
    }
  }
  return siteDefaultValue
}

export const getSiteLabel = (siteType?: number) => {
  if (!siteType) {
    return []
  }
  let siteDefaultValue = [];
  if (siteType) {
    if ((1 & siteType) == 1) {
      siteDefaultValue.push('web端');
    }
    if ((2 & siteType) == 2) {
      siteDefaultValue.push('wap端');
    }
    if ((4 & siteType) == 4) {
      siteDefaultValue.push('管理端');
    }
  }
  return siteDefaultValue.join(',')
}

/** 表格编辑项组件
 *  **/
export const EditableCell: React.FC<EditableCellProps> = ({
  editing,
  dataIndex,
  title,
  inputType,
  record,
  index,
  children,
  ...restProps
}) => {
  let inputNode = dataIndex == 'siteType' ? <Select
    mode="multiple"
    options={[
      { value: 1, label: 'web端' },
      { value: 2, label: 'wap端' },
      { value: 4, label: '管理端' },
    ]}
  /> : <Input />;

  if (dataIndex == 'key' || dataIndex == 'componentName') {
    inputNode = <span>{record[dataIndex]}</span>
  }
  return (
    <td {...restProps}>
      {editing ? (
        <Form.Item
          name={dataIndex}
          style={{ margin: 0 }}
          rules={[
            {
              required: true,
              message: `请输入${title}!`,
            },
          ]}
        >
          {inputNode}
        </Form.Item>
      ) : (
        children
      )}
    </td>
  );
};

/**搜索多语言
 * **/
export const SearchLangInPut = (props) => {
  return (
    <div className={styles.search}>
      <Input
        placeholder="搜索多语言"
        onChange={(e) => {
          props.onSearch(e)
        }}
        suffix={<InbizIcon type="icon-ic-sousuo" style={{ color: '#999' }} />}
      />
    </div>
  )
}

export default EditLangTabs




